<template>
	<view class="pages">
		<view class="nav">
			<u-tabs-swiper :duration="0.2" ref="uTabs" :list="tabsList" bar-width="60" inactive-color="#333"
				active-color="#333" bar-height="10" :bar-style="barStyle" :current="current" @change="tabsChange"
				:is-scroll="false" font-size="28"></u-tabs-swiper>
		</view>
		<view class="search">
			<u-search bg-color="#FFFFFF" placeholder=" " v-model="keyword"></u-search>
		</view>
		<swiper :vertical="false" :style="'height:'+swiperH+'px;'" :duration="200" :current="swiperCurrent"
			@transition="transition" @animationfinish="animationfinish">
			<swiper-item v-for="(tabs, tabsI) in tabsList" :key="tabsI">
				<scroll-view @refresherrestore="onRestore" @refresherrefresh="refresherrefresh"
					:refresher-triggered="tabs.refresherTriggered" refresher-background="#F6F8F6" scroll-y
					:style="'height:'+swiperH+'px;'" @scrolltolower="handleOnRemBottom" refresher-enabled>
					<view class="list u-p-l-20 u-p-r-20 bg-white" v-if="tabs.list && tabs.list.length">
						<view class="item flex u-p-t-20 u-p-b-20" @click="openKnowLedgeDetail(item)"
							v-for="(item,index) in tabs.list" :key="index">
							<view @click.stop="handleCheck(item)" class="checkBox flex align-center justify-center u-m-t-5">
								<u-icon v-if="handleCheckFilter(item)" name="checkbox-mark" size="20" color="#CCCCCC"></u-icon>
							</view>
							<view class="flex-shrink u-font-24 tag text-white" :style="[handleTypeBg(item.type)]">
								{{item.type | handleType}}
							</view>
							<view class="u-m-l-20">
								<view class="word-break-all u-font-28 color333">{{item.title}}</view>
								<view class="u-font-24 color999 u-m-t-30">{{item.createTime}}</view>
							</view>
						</view>
						<view class="u-p-t-20 u-p-b-20">
							<u-loadmore :status="tabs.status" font-size="24" />
						</view>
					</view>
					<!-- 空状态 -->
					<view class="u-p-t-50" v-else>
						<uni-nodata></uni-nodata>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>

		<view class="bottom-submit">
			<view class="submit" @click="submit">
				<u-icon name="checkbox-mark" class="u-m-r-10" size="32" color="#333"></u-icon>
				确定
			</view>
			<view class="w-100" :style="'height:'+safeAreaInsetsBottom+'px;'"></view>
		</view>
	</view>
</template>

<script>
	import {
		myQues,
		myNote
	} from "@/api/mine.js"
	import {
		KnowledgeAdd,
		queryQuestion
	} from "@/api/send.js"

	export default {
		data() {
			return {
				chooseList: [], //选中的数据
				parentInfo: {},
				safeAreaInsetsBottom: 0,
				barStyle: {
					borderRadius: '100rpx',
					backgroundColor: "#F7DD5E",
					bottom: "16rpx",
					boxShadow: "0 4rpx 10rpx rgba(0,0,0,0.2)"
				},
				tabsList: [{
					name: "问答",
					page: 1,
					size: 20,
					list: [],
					status: 'loadmore',
					refresherTriggered: false
				}, {
					name: "笔记",
					page: 1,
					size: 20,
					list: [],
					status: 'loadmore',
					refresherTriggered: false
				}, {
					name: "资料",
					page: 1,
					size: 20,
					list: [],
					status: 'loadmore',
					refresherTriggered: false
				}, {
					name: "辅导",
					page: 1,
					size: 20,
					list: [],
					status: 'loadmore',
					refresherTriggered: false
				}, {
					name: "直播",
					page: 1,
					size: 20,
					list: [],
					status: 'loadmore',
					refresherTriggered: false
				}, {
					name: "文章",
					page: 1,
					size: 20,
					list: [],
					status: 'loadmore',
					refresherTriggered: false
				}],
				current: 0, // tabs组件的current值，表示当前活动的tab选项
				swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
				keyword: "",
				page: 1,
				pageSize: 10,
				swiperH: 0,
			}
		},
		filters: {
			handleType(val) {
				let str = '';
				// zbbg
				switch (val) {
					case 1:
						str = "答"
						break;
					case 2:
						str = "记"
						break;
					case 3:
						str = "资"
						break;
					case 4:
						str = "辅"
						break;
					case 5:
						str = "直"
						break;
					case 6:
						str = "文"
						break;
				}
				return str;
			}
		},
		onLoad(e) {
			this.parentInfo = {
				name: e.name,
				id: e.id
			}
			this.getList();
			this.$nextTick(() => {
				this.safeAreaInsetsBottom = this.$u.sys().safeAreaInsets.bottom;
				this.swiperH = this.$u.sys().windowHeight - uni.upx2px(274) - this.safeAreaInsetsBottom;
			})
		},
		methods: {
			onRestore() {
				this.tabsList[this.swiperCurrent].refresherTriggered = 'restore';
			},
			//下拉刷新
			refresherrefresh() {
				this.tabsList[this.swiperCurrent].refresherTriggered = true;
				setTimeout(async () => {
					await this.getList();
					this.tabsList[this.swiperCurrent].refresherTriggered = false;
				}, 1000)

			},
			//上拉触底
			handleOnRemBottom() {
				if (this.tabsList[this.swiperCurrent].status == 'nomore') return;
				this.tabsList[this.swiperCurrent].page++;
				this.getList();
			},
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index;
				if (!this.tabsList[this.swiperCurrent].list.length) {
					this.getList();
				}
			},
			// swiper-item左右移动，通知tabs的滑块跟随移动
			transition(e) {
				let dx = e.detail.dx;
				this.$refs.uTabs.setDx(dx);
			},
			// 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
			// swiper滑动结束，分别设置tabs和swiper的状态
			animationfinish(e) {
				let current = e.detail.current;
				this.$refs.uTabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			handleCheckFilter(val) {
				return !!this.chooseList.includes(val);
			},
			//添加知识绑定
			submit() {
				if (!this.chooseList.length) {
					uni.showToast({
						title: '至少选择一个绑定！',
						icon: 'none'
					});
					return;
				}
				let addBatch = this.chooseList.map(e => {
					return {
						parentId: this.parentInfo.id,
						relatedId: e.id,
						knowledgeName: e.title,
						type: ~~e.type++,
						userId: uni.getStorageSync('userId'),
					}
				})
				uni.showLoading({
					mask: true
				});
				KnowledgeAdd({
					list: addBatch
				}).then(res => {
					if (res.code == 100000) {
						uni.showToast({
							title: '添加知识成功！',
							icon: 'none'
						});
						uni.navigateBack(1);
					}
				}).finally(() => {
					uni.hideLoading();
				})
			},
			getList() {
				if (this.tabsList[this.swiperCurrent].page === 1) this.tabsList[this.swiperCurrent].list = [];
				var urlEnmu = {
					0: queryQuestion,
					1: myNote,
					2: '',
					3: '',
					4: '',
					5: ''
				}
				if (!urlEnmu[this.swiperCurrent]) return;
				uni.showLoading({
					mask: true
				});
				urlEnmu[this.swiperCurrent]({
					page: this.tabsList[this.swiperCurrent].page,
					size: 20,
					userId: uni.getStorageSync('userId'),
					treeId: this.parentInfo.id
				}).then((res) => {
					if (res.code == 100000) {
						let list = res.data.rows && res.data.rows.map(e => {
							let type = JSON.parse(JSON.stringify(this.swiperCurrent));
							return {
								title: e.title,
								createTime: e.createTime,
								id: e.id,
								type: ~~type++
							}
						})
						this.tabsList[this.swiperCurrent].list.push(...list);
						if (!res.data.rows || res.data.rows.length < 20) {
							this.tabsList[this.swiperCurrent].status = 'nomore';
						} else {
							this.tabsList[this.swiperCurrent].status = 'loading';
						}
					}
				}).finally(()=>{
					uni.hideLoading();
				})
			},
			handleCheck(row) {
				let index = this.chooseList.findIndex(e => e.id == row.id);
				if (index > -1) {
					this.chooseList.splice(index, 1);
					return;
				}
				this.chooseList.push(row);
			},
			//打开知识
			openKnowLedgeDetail(row) {
				//需要根据Type来打开不同的文章
				uni.showToast({
					title: '打开文章详情',
					icon: 'none'
				});
			},
			handleTypeBg(val) {
				let str = '';
				let style = {};
				switch (val) {
					case 1:
						str = "rgba(25, 204, 165, .23)"
						break;
					case 2:
						str = "rgba(94, 116, 139, 1)"
						break;
					case 3:
						str = "rgba(25, 204, 165, .8)"
						break;
					case 4:
						str = "rgba(255, 113, 1, .85)"
						break;
					case 5:
						str = "rgba(170, 255, 127, 0.8)"
						break;
					case 6:
						str = "rgba(255, 85, 255, 0.8)"
						break;
				}
				style.backgroundColor = str;
				return style;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #FFF;

		.nav {
			color: #73839A;
			border: 2rpx solid #EBEEEF;
			font-size: 28rpx;
			background-color: #FFFFFF;
		}

		.search {
			padding: 10rpx 64rpx;
			background-color: #F6F8F6;
		}

		.list {
			.item {
				border-bottom: 2rpx dashed #EBEEEF;

				.checkBox {
					width: 34rpx;
					height: 30rpx;
					margin-right: 20rpx;
					border: 2rpx solid #CCCCCC;
				}
			}

			.tag {
				border-radius: 8rpx;
				width: 40rpx;
				height: 40rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.bottom-submit {
			background-color: #FFF;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			padding-top: 20rpx;

			.submit {
				width: 280rpx;
				height: 90rpx;
				border-radius: 100rpx;
				background-color: #F7DD5E;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
			}
		}
	}
</style>